<template>
  <el-dialog
    title="添加新区域"
    :close-on-click-modal="false"
    :visible.sync="classalert"
    v-loading.fullscreen.lock="vloading"
  >
    <el-form :model="form">
      <el-row>
        <el-col :span="22"
          ><el-form-item label="区域名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" placeholder="请输入区域名称" /> </el-form-item
        ></el-col>
      </el-row>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="classalert = false">取 消</el-button>
      <el-button type="primary" @click="ok">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { savearea } from "@/api/sub/area.js";
export default {
  name:"serviceadd",
  data() {
    var $domain = process.env.VUE_APP_BASE_API;
    return {
      domain: $domain,
      listinfo: [],
      classalert: false,
      vloading:false,
      form: {
        name: "",
      },
      formLabelWidth: '120px'
    };
  },
  methods: {
    add() {
      var that = this;
      that.classalert = true;
    //   for (var i in that.form) {
    //     that.form[i] = "";
    //   }
    },
    ok() {
      this.vloading = true
      this.requestadd();
    },
    requestadd() {
      var that = this;
      savearea(that.form).then((res) => {
        that.$emit('then')
        that.classalert = false;
        that.vloading = false
      });
    }
  }
};
</script>

<style>
  .el-form--inline .el-form-item__content {
    display: block;
  }
  .el-upload--picture-card {
  margin: 1%;
  position: relative;
  overflow: hidden;
  display: inline-block;
  }
  .close {
    opacity: 0;
    transition: opacity 0.3s;
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.5);
    transition: opacity 0.3s;
  }
  .el-upload--picture-card:hover .close {
    opacity: 1;
  }
  .close > i {
    margin: auto;
  }
  input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    }

    input[type="number"] {
    -moz-appearance: textfield;
    }
</style>